<template>
  <div id="app">
    <ul class="trend clearfix">
      <li class="baseColor">金价走势</li>
      <li >银价走势</li>
    </ul>
    <ul class="trend price">
      <li class="fl grayColor">今日最高价格：10000</li>
      <li class="fr grayColor">今日最低价格:100</li>
    </ul>
    <div id="myChart" :style="{width: '100%', height: '300px'}" ref="echarts"></div>
    <ul class="line">
      <li>分时线</li>
      <li>5分线</li>
      <li>30分线</li>
      <li>日线</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: "echart",
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '45px',
            right: '3%',
            top: '15%',
            bottom: '20%'
          },
          dataZoom: [
            {
              type: 'slider',
              xAxisIndex: 0,
              filterMode: 'empty'
            },
            {
              type: 'inside',
              xAxisIndex: 0,
              filterMode: 'empty'
            }
          ],
          xAxis: {
            type: 'category',
            data: ['14:29', '15:29', '16:29', '17:29', '18:29', '19:29', '20:29']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
          }]
        };
        window.onresize = myChart.resize;
        myChart.setOption(option);
      },
    }
  }
</script>

<style  lang="less" scoped>
#app {
  .trend {
    display: flex;
    li {
      flex: 1;
      font-size: 0.6rem;
      text-align: center;
      margin-bottom: 0.2rem;
    }
  }
  .price {
    li {
      font-size: 0.55rem;
    }
  }
  .line {
    display: flex;
    margin: 0 1rem;
    li {
      flex: 1;
      text-align: center;
      line-height: 2rem;
      font-size: 0.55rem;
      color: #666;
    }
  }
}
</style>
